<template>
    <div>
        <input type="text" ref="inp1">
        <!-- 使用子组件 -->
        <Mymodal ref="modal"></Mymodal>
        <button @click="showmodal">显示模态框</button>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
// 引入子组件
import Mymodal from '@/components/Mymodal.vue'
// 这样获取到了模态框组件实例
const modal = ref<InstanceType<typeof Mymodal> | null>(null);
console.log('modal', modal);
const showmodal = () => {
    modal.value?.open()
}

const inp1 = ref<HTMLInputElement | null>(null)
onMounted(() => {
    console.log('inp1', inp1.value);
    // 第一种方式: 使用类型断言
    // (inp1.value as HTMLInputElement).focus()
    // 第二种方式 :使用可选链方式

    // 表示 focus()属性为可选属性, 当为null时就没有focus, 不为null 有focus
    inp1.value?.focus()
})

</script>
<style scoped></style>